<template>
  <div class="shop">
    <div class="header flex_between m-32">
        <div class="inputNav"><input type="text" placeholder="您想找什么" @click='$router.push({path:"search",query:{type:"shop"}})' /></div>
        <div class="btn_addd" @click='$router.push("/releaseShop")'><img src="../../../public/images/qt_58.png" width="100%" height="100%"/></div>
    </div> 
    <div class="centerNav">
      <div class="banner"><img src='../../../public/images/banner.png' width="100%" height="100%"/></div>
        <h1 class="title ml-30 mr-30">商品分类<span @click='typeChoose("")'>全部商品</span></h1>
        <ul class="shopType flex_between flex-wrap">
          <li v-for='(item,index) in typeArray' :key='index' @click='typeChoose(item.categoryId)' class="mb-40">
            <img :src="item.photo"/>
            <div>
              <h2 class="hide_other">{{item.name}}</h2>
              <p class="hide_other">{{item.description}}</p>
            </div>
          </li>
        </ul>

        <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> -->
          <van-list v-model="loading" :finished="finished" @load="onLoad" :immediate-check="false" finished-text="没有更多了">
              <div class="shopList flex_between flex-wrap" v-show="categoryList.length!=0">
                <div class="shop" v-for='(item,index) in categoryList' :key='index' @click='jump(item)' >
                  <div v-if='!item.ggw'>
                    <img :src='item.images' class="shopPic"/>
                    <div class="ml-20 mr-20" style="width:2.9rem;">
                      <div class="name">
                        <p class="hide_other l ">{{item.title}}</p>
                        <div class="publicTags l">{{item.quality}}</div>
                        <div class="clear"></div>
                      </div>
                      <div class="other mb-20">
                        <p>￥{{item.price}}</p>
                        <!-- <p>16人想要</p> -->
                        <div class="clear"></div>
                      </div>
                      <div class="peopleMessage">
                        <img :src='item.userInfo.userPhoto' class="mPic" @click.stop='$router.push({path:"otherUser",query:{userId:item.userInfo.userId}})'/>
                        <div>
                          <h3 class="hide_other">{{item.userInfo.userName}}</h3>
                          <p><img src="../../../public/images/huizhang.png"/> 信用值&nbsp{{item.userInfo.creditNum}}</p>
                        </div>
                        <div class="clear"></div>
                      </div>
                    </div>
                  </div>
                  <div v-else>
                    <img src='../../../public/images/gg.png' class="shopPic"/>
                  </div>
                </div>
              </div>
          </van-list>
        <!-- </van-pull-refresh> -->
    </div>
    
    

    <mt-footer></mt-footer>
  </div>
</template>
<script>
export default {
  data(){
    return{
      typeArray:[],
      categoryList:[],
      loading: false,
      finished: false,
      page:1,
      isLoading:false,
      size:10,
      id:'',
    }
  },
  created(){
    this.getMessage();
    this.typeChoose()
  },
  methods:{
    getMessage(){
      this.$get(this.$api.market.category,{size:10,page:1}).then(data=>{
        this.typeArray=data.data.curPageData;
      })
    },
    typeChoose(id){
      this.id=id;
      var parm={
        size:this.size,
        page:1,
        categoryId:id
      };
      if(!parm.categoryId) delete parm.categoryId;
      this.$get(this.$api.market.commodities,parm).then(data=>{
        data.data.curPageData.forEach((item,index)=>{
          data.data.curPageData[index].images=JSON.parse(item.images)[0];
        });
        // if(Number(data.data.totalNum)>1) data.data.curPageData.splice(1, 0,{ggw:true}); 
        this.categoryList=data.data.curPageData;
        this.page=2;
      })
    },
    onLoad() {
      console.log(this.page)
      let parm={size:this.size,page:this.page,categoryId:this.id}
      if(!this.id) delete parm.categoryId;
      setTimeout(() => {
        this.$get(this.$api.market.commodities,parm).then(data=>{
          // console.log(data.total,this.page-1)
          console.log((Number(this.page)-1)*this.size,data.data.totalNum)
          if((Number(this.page)-1)*this.size<data.data.totalNum){
          // if((this.page-1)*this.size<data.data.totalNum){
            data.data.curPageData.forEach((item,index)=>{
              data.data.curPageData[index].images=JSON.parse(item.images)[0];
            });
            for (let i = 0; i < data.data.curPageData.length; i++) {
              this.categoryList.push(data.data.curPageData[i]);
            };
            console.log(this.categoryList);
            this.loading = false;
          }else{
            this.loading = false;
            this.finished  = true;
            console.log(this.finished)
          }
          this.page++;
        })
      }, 500);
    },
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
        this.typeChoose(this.id);
      }, 500);
    },
    jump(item){
      let path;
      switch(item.status){
        case 0:
          path='shopDetail';
          break;
        case 1:
          path='myShopDetail';
          break;
        case 2:
          path='shopFinish';
          break;
      };
      this.$router.push({path:path,query:{categoryId:item.commodityId}})
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .header{padding-top: 0.3rem;margin-bottom: 0.3rem;}
  .header .inputNav{position: relative;flex:1;height: 0.64rem;position: relative;}
  .header input{width: 100%;height: 100%;;font: 0.28rem/0.64rem '微软雅黑';color: #999999;text-indent: 0.8rem;background: #F5F5F5;border-radius:0.32rem;border: none;outline: none;display: block;}
  .header .inputNav::before{content: '';width: 0.3rem;height: 0.3rem;background: url('../../../public/images/qt_110.png') no-repeat;background-size: 100% 100%;position: absolute;left:0.3rem;top: 0.17rem;}
  .btn_addd {width: 0.5rem;height: 0.5rem;margin-top: 0.07rem;margin-left: 0.23rem;}
  .btn_addd img{display: block;}
  .banner{margin: 0.13rem 0.3rem 0;height: 3rem;border-radius: 0.12rem;overflow: hidden;}
  .title{font:0.34rem/1.3rem '微软雅黑';color: #000000;}
  .title span{color: #4AACE9;float: right;font-size: 0.3rem;}
  .shopType {margin: 0 0.5rem;}
  .shopType li img{float: left;display: block;width: 0.8rem;height: 0.8rem;border-radius:0.32rem;overflow: hidden;}
  .shopType li div{float: left;margin-left: 0.2rem;}
  .shopType li div h2{font: 0.3rem/0.4rem '微软雅黑';font-weight: normal;color: #333;max-width: 1.8rem;}
  .shopType li div p{font: 0.2rem/0.4rem '微软雅黑';color: #909090;max-width: 1.8rem;}
  .shopList{background-color: #F0F1F4;padding: 0.3rem;}
  .shopList .shop{background-color: #fff;padding-bottom: 0.2rem;border-radius: 0.12rem;margin-bottom: 0.3rem;}
  .shopList .shop .shopPic{width: 3.3rem;height: 3.3rem;display: block;}
  .shopList .shop .name{font: 0.26rem/0.3rem '微软雅黑';color: #000;margin: 0.23rem 0;}
  .shopList .shop .name p{display: inline-block;max-width:60%;}
  .shopList .shop .other p:nth-of-type(1){float: left;display: block;font: 0.34rem/0.3rem '微软雅黑';color: #F88222;}
  .shopList .shop .other p:nth-of-type(2){float: right;display: block;font: 0.2rem/0.3rem '微软雅黑';color: #999999;}
  .peopleMessage{border-top:1px solid rgba(153,153,153,0.2);padding: 0.2rem 0;}
  .peopleMessage .mPic{width:0.7rem;height: 0.7rem;border-radius: 50%;overflow: hidden;float: left;display: block;}
  .peopleMessage>div{float: left;margin-left: 0.21rem;}
  .peopleMessage>div h3{font: 0.24rem/0.35rem '微软雅黑';color: #4AACE9;width: 1.9rem}
  .peopleMessage>div p{font: 0.2rem/0.35rem '微软雅黑';color:#999999;}
  .peopleMessage>div p img{display: inline-block;width:0.24rem;height: 0.24rem;}
  .centerNav{height:calc(100vh - 1.24rem - 50px);overflow-y: scroll;}
</style>
